<template>

  <el-date-picker
    v-model="queryTime"
    size="mini"
    type="monthrange"
    align="left"
    unlink-panels
    range-separator="至"
    value-format="yyyy-MM"
    start-placeholder="开始月份"
    end-placeholder="结束月份"
    :clearable="false"
    :picker-options="pickerOptions"
  >
  </el-date-picker>
</template>

<script>
const moment = require('moment')

export default {
  data() {
    return {
      queryTime: [moment(new Date()).subtract(6, 'months').format('YYYY-MM'),
        moment(new Date()).subtract(1, 'months').format('YYYY-MM')],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > moment(new Date()).subtract(0, 'months').valueOf()
        },
        shortcuts: [{
          text: '今年至今',
          onClick(picker) {
            const end = new Date()
            const start = new Date(new Date().getFullYear(), 0)
            end.setMonth(end.getMonth() - 1)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近六个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 6)
            end.setMonth(end.getMonth() - 1)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 12)
            end.setMonth(end.getMonth() - 1)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  computed: {

  },
  watch: {
    queryTime() {
      this.$emit('child-time', this.queryTime)
    }
  },
  mounted() {
    this.$emit('child-time', this.queryTime)
  },
  methods: {
    setChildTimeRange(data) {
      this.queryTime = data
    }
  }

}
</script>

